<template>
<div>

  <el-row>
    <el-col :span="4"><el-input v-model="stuName" placeholder="输入学生姓名"></el-input></el-col>
    <el-col :span="4"><el-button type="primary"  @click="findCheckInfoByStudentName">查询</el-button>
      <el-button type="warning" @click="saveStudentsCheckInfo">保存</el-button></el-col>
    <el-col :span="12"></el-col>
  </el-row>

  <el-table
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        prop="id"
        label="序号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="stuID"
        label="学号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="stuName"
        label="姓名">
    </el-table-column>
    <el-table-column
        prop="stuClass"
        label="班级">
    </el-table-column>
    <el-table-column
        prop="checkDate"
        label="考勤日期">
    </el-table-column>
    <el-table-column
        prop="checkStatus"
        label="考勤状态">
      <template slot-scope="scope">
        <el-select v-model="scope.row.checkStatus" placeholder="请选择" @change="changeStatus(scope.row)">
          <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
export default {
  data() {
    return {
      stuName:'',
      curdate:'2023-06-02',
      statusList:[
        {id:1,label:'请假一天',value:'请假一天'},
        {id:2,label:'迟到',value:'迟到'},
        {id:3,label:'早退',value:'早退'},
        {id:4,label:'正常',value:'正常'},
        {id:5,label:'上午请假',value:'上午请假'},
        {id:6,label:'下午请假',value:'下午请假'}
      ],

      tableData: [{
        id: 4,
        stuName: '陈宪',
        stuClass: 'WNSHJ078',
        stuID:'WNWH202301010',
        checkStatus:'下午请假',
        checkDate: '2023-06-02'
      }, {
        id: 1,
        stuName: '陈宪',
        stuClass: 'WNSHJ078',
        stuID:'WNWH202301010',
        checkStatus:'下午请假',
        checkDate: '2023-06-02'
      }, {
        id: 2,
        stuName: '陈宪',
        stuClass: 'WNSHJ078',
        stuID:'WNWH202301010',
        checkStatus:'下午请假',
        checkDate: '2023-06-02'
      }, {
        id: 3,
        stuName: '陈宪',
        stuClass: 'WNSHJ078',
        stuID:'WNWH202301010',
        checkStatus:'下午请假',
        checkDate: '2023-06-02'
      }]
    };
  },
  methods: {
    findAllCheckStatus(){
      this.$axios({
        url:'/findAllCheckStatus',
        method:'get'
      }).then(res=>{
        console.log(res)
        this.statusList=[]
        for(let i=0;i<res.data.length;i++){
          this.statusList.push({id:res.data[i].id,label:res.data[i].checkStatus,value:res.data[i].checkStatus})
        }
        //this.tableData = res.data.list;

      })
    },
    changeStatus(row){
      for(let i=0;i<this.tableData.length;i++){
        if(this.tableData[i].stuID==row.stuID){
          this.tableData[i].checkStatus=row.checkStatus;
        }
      }
    },
    findCheckInfoByStudentName(){
      this.$axios({
        url:'/findCheckInfoByStudentName',
        method:'get',
        params:{
          stuName:this.stuName
        }
      }).then(res=>{
        console.log(res)

      })
    },
    findAllStudentsCheckInfo(){
      this.$axios({
        url:'/findAllStudentsCheckInfo',
        method:'get'
      }).then(res=>{
        console.log(res)
        this.tableData = res.data;
        // for(let i =0;i<tmp.length;i++){
        //   tmp[i].checkDate=new Date();
        // }
        // this.tableData=tmp
      })
    },
    saveStudentsCheckInfo(){
      this.$axios({
        url:'/saveStudentsCheckInfo',
        method:'post',
        data:this.tableData
      }).then(res=>{
        console.log(res)
        // this.tableData=res.data
      })
    }

  },
  created(){
    this.findAllCheckStatus();
   this.findAllStudentsCheckInfo();
  }
}
</script>
